<template>
	<view class="content">
		<view class="item-top" :style="{ 'background-image': 'url(' + topImg + ')' }">
			<view class="item-admin">
				用户133****2345下单了这个产品 3分钟前
			</view>
			<!-- <view class="item-img">
				<view class="item-left">
					<image src="@/static/img/order-back.png" mode=""></image>
				</view>
				<view class="item-right">
					<image src="@/static/img/order-search.png" mode=""></image>
					<image src="@/static/img/order-collect.png" mode=""></image>
					<image src="@/static/img/order-vx.png" mode=""></image>
				</view>
			</view> -->
		</view>
		<view class="item-main">
			<view class="main-top">
				<view class="top-left">
					<text style="font-size: 26rpx;">￥</text>399
				</view>
				<view class="top-right">
					已售30
				</view>
			</view>
			<view class="item-title">
				债权债务代理起诉方(套餐)一审+二审+执行
			</view>
			<view class="item-way">
				<text class="item-txt">分期付</text>
				<text class="item-txt">为你分忧</text>
				<text class="item-txt">效益归你</text>
			</view>
			<view class="item-bottom" @click="$refs.orderService.$refs.popupEnsure.open()">
				<image class="bottom-sure" src="@/static/img/order-sure.png" mode=""></image>
				<text class="bottom-left">服务保障 </text>
				<text class="bottom-order"></text>
				<text class="bottom-txt">免费取消订单·隐私保护·保险保障·无理...</text>
				<image class="bottom-img" src="@/static/img/right.png" mode="aspectFit"></image>
			</view>


		</view>
		<!-- <view class="item-offset" >
			<u-sticky offset-top="0">
				<view>
					塞下秋来风景异，衡阳雁去无留意
				</view>
			</u-sticky>
		</view> -->

		<view class="od-box  od-boxs">
			<!-- 服务领域新组件 -->
			<order-items-service ref="orderItem" :info="info" v-if="Object.keys(info.product).length > 0">
			</order-items-service>
			<!-- 服务领域组件 -->
			<!-- 	<order-item-service ref="orderItemService" :info="info" v-if="Object.keys(info.product).length > 0">
			</order-item-service> -->
			<view class="od-item marginbottom20">
				<view class="item-tip">
                    <view class="center-box">
                        费用承担<view class="required-box">
                        *
                        </view>
                    </view>
                </view>
                <view class="item-right">
                	<view class="service-list inline-list">
                		<view class="service-item active">投资人支付</view>
                	</view>
                </view>
					<!-- <view class="item-img">
						<image class="" src="@/static/img/right.png" mode="aspectFit"></image>
					</view> -->
					<!-- 	<view class="service-list inline-list">
						<view class="service-item" @click="bearFees = '投资人支付(不用还)'"
							:class="bearFees == '投资人支付(不用还)' ? 'active' : ''">
							投资人支付
							<image class="noback2" src="@/static/img/order-noback.png"></image>
						</view>
						<view class="service-item" @click="bearFees = '自费'" :class="bearFees == '自费' ? 'active' : ''">自费
						</view>
					</view>
					<view class="item-nav"></view> -->
			</view>
			<view class="od-item marginbottom20">
				<view class="item-tip">涉案金额</view>
                <view class="item-right">
                	<view class="service-list inline-list">
                		<view class="service-item active" style="width: 100%; margin-right: 0;">{{ qiankuan }}</view>
                	</view>
                </view>
			</view>
			<template v-if="bearFees == '自费'">
				<!-- 	<view class="od-item marginbottom20">
					<view class="item-tip">案件进度</view>
					<view class="item-right">
						<view class="service-list inline-list">
							<view class="service-item" :class="{ active: jindu == item.value_name }"
								v-for="(item, index) in info.list.jindu" @click="jindu = item.value_name">
								{{ item.value_name }}
							</view>
						</view>
						<view class="item-nav"></view>
					</view>
				</view>
				<view class="od-item marginbottom20">
					<view class="item-tip">我的角色</view>
					<view class="item-right">
						<view class="service-list inline-list">
							<view class="service-item" :class="{ active: self_ident == item.value_name }"
								v-for="(item, index) in info.list.self_ident" @click="self_ident = item.value_name">
								{{ item.value_name }}
							</view>
						</view>
						<view class="item-nav"></view>
					</view>
				</view>
				<view class="od-item marginbottom20">
					<view class="item-tip">对方类型</view>
					<view class="item-right">
						<view class="service-list inline-list">
							<view class="service-item" :class="{ active: dui_ident == item.value_name }"
								v-for="(item, index) in info.list.dui_ident" @click="dui_ident = item.value_name">
								{{ item.value_name }}
							</view>
						</view>
						<view class="item-nav"></view>
					</view>
				</view>
				<view class="od-item marginbottom20">
					<view class="item-tip">对方失信</view>
					<view class="item-right">
						<view class="service-list inline-list">
							<view class="service-item" :class="{ active: is_believe == 1 }" @click="is_believe = 1">否
							</view>
							<view class="service-item" :class="{ active: is_believe == 0 }" @click="is_believe = 0">是
							</view>
						</view>
						<view class="whyIcon"
							@click="jump('/pages/client/order/web-view', { url: 'http://zxgk.court.gov.cn/zhixing' })">
							<image src="@/static/img/why.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="od-item marginbottom20">
					<view class="item-tip">审理机构</view>
					<view class="item-right">
						<view class="service-list inline-list">
							<view class="service-item" :class="{ active: organization == item.value_name }"
								v-for="(item, index) in info.list.organization" @click="organization = item.value_name">
								{{ item.value_name }}
							</view>
						</view>
						<view class="item-nav"></view>
					</view>
				</view>
				<view class="od-item marginbottom20">
					<view class="item-tip require">审理地点</view>
					<view class="item-right" @click="$refs.popupTake.open()">
						<view class="service-list inline-list">
							<view class="service-item active">{{ hear_addr }}</view>
						</view>
						<view class="item-txt gray" v-if="!hear_addr">您的案件在哪里审理？</view>
						<view class="item-nav" @click="$refs.popupTake.open()" v-else>
							<image src="@/static/img/right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="od-item marginbottom20">
					<view class="item-tip require">服务人员</view>
					<view class="item-right" @click="$refs.popupService.open()">
						<view class="service-list inline-list">
							<view class="service-item active">智能匹配</view>
							<view class="service-item active">{{ practiceYear.replace('以上', '起') }}</view>
							<view class="service-item active" v-if="practiceArea.split(',').length > 1">
								<text class="text-ellipsis">{{ practiceArea.split(',')[1] }}</text>
							</view>
							<view class="service-item active" v-else>{{ practiceArea }}</view>
						</view>
						<view class="item-nav">
							<image src="@/static/img/right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="od-item marginbottom20">
					<view class="item-tip">服务阶段</view>
					<view class="item-right" @click="$refs.popupServiceStage.open()">
						<view class="service-list inline-list">
							<view class="service-item active" style="width: 100%; margin-right: 0;">{{ stage }}</view>
						</view>
						<view class="item-nav">
							<image src="@/static/img/right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="od-item marginbottom20">
					<view class="item-tip">服务报价</view>
					<view class="item-right">
						<view class="service-list service-list-bottom inline-list">
							<view class="service-item marginbottom20" :class="{ active: offer == item.value_name }"
								@click="offer = item.value_name" v-for="(item, index) in offerList">
								{{ item.value_name }}
							</view>
							<view class="service-tip-box" v-html="tipGrade"></view>
						</view>
						<view class="item-nav"></view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">律师费用</view>
					<view class="item-right">
						<view class="fee-item flex">
							<view class="fee-tip">前期费用：</view>
							<view class="service-list service-two" style="flex: 1;">
								<view class="fee-right" v-if="offer == '还魂马'">无</view>
								<view v-else class="service-item" style="width: 250rpx;"
									:class="price_type_text == item.price_type_text ? 'active' : ''" @click="
									product_price_id = item.id;
										price_type_text = item.price_type_text;
										money = item.price;
									" v-for="(item, index) in moneyList">
									<text class="two-money">¥{{ item.total }}</text>
									<text class="two-tip">{{ item.price_type_text }}</text>
									<image v-if="item.price_type_text == '先用后付 无忧付'" class="noback"
										src="@/static/img/order-noback2.png" mode="aspectFit"></image>
									<image v-if="item.price_type_text == '边用边付 轻松付'" class="noback"
										src="@/static/img/order-noback3.png" mode="aspectFit"></image>
								</view>
							</view>
						</view> -->
				<!-- <view class="fee-item flex">
							<view class="fee-tip">后期费用：</view>
							千里马，无后期费用。活马和还魂马有后期费用
							<view class="fee-right" v-if="offer == '千里马'">无</view>
							<view class="fee-right" v-else>{{ moneyList.length > 0 ? moneyList[0].later_money : '' }}
							</view>
						</view>
					</view>
				</view> -->
				<!-- <view class="od-item marginbottom20" v-if="bearFees == '投资人支付(不用还)'">
					<view class="item-tip">投资人收益</view>
					<view class="item-right">
						<view class="item-txt">
							<text class="red">您回收款物后5日内，按回收款物金额的30％支付投资收益给投资人，不回款不用付。</text>
							<br />
						</view>
					</view>
				</view> -->
				<!-- 	<view class="od-item">
					<view class="item-tip">项目资料</view>
					<view class="item-right"
						@click="jump('/pages/client/order/upload', { source: JSON.stringify(source) })">
						<view class="item-txt gray">您手上有的资料，都可上传</view>
						<view class="item-file" v-if="source && source.length > 0">
							<image src="@/static/img/order-file.png"></image>
						</view>
						<view class="item-nav">
							<image src="@/static/img/right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">我的要求</view>
					<view class="item-right">
						<order-right-textarea ref="myrequire"></order-right-textarea>
						<view class="item-nav"></view>
					</view>
				</view> -->
				<!-- 优惠券组件 -->
				<!-- <order-user-coupon :info="info" v-if="Object.keys(info.product).length > 0" @getCoupon="getCoupon">
				</order-user-coupon> -->
				<!-- 付款方式组件 -->
				<!-- 选千里马-先用后付或还魂马时，付费方式字段隐藏 -->
				<!-- 	<template v-if="price_type_text != '先用后付 无忧付' && offer != '还魂马'">
					<order-item-pay-method ref="orderItemPayMethod" :info="info"
						v-if="Object.keys(info.product).length > 0"></order-item-pay-method>
				</template> -->

				<!-- <view class="od-item">
					<view class="item-tip">服务保障</view>
					<view class="item-right" @click="$refs.orderServiceEnsure.$refs.popupEnsure.open()">
						<view class="item-txt green">
							<view class="text-ellipsis" style="width: 400rpx;">{{ info.product.tags }}</view>
						</view>
						<view class="item-nav">
							<image src="@/static/img/right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view> -->

				<!--
				<view class="od-item">
					<view class="item-tip require">服务方式</view>
					<view class="item-right">
						<view class="item-txt">{{ serviceType }}</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">其他费用</view>
					<view class="item-right">
						<view class="item-txt"><text class="blue">国家费用</text></view>
					</view>
					<view class="whyIcon" @click="$refs.orderCommonTip.$refs.popupTip.open()">
						<image src="@/static/img/why.png" mode="aspectFit"></image>
					</view>
				</view> -->
			</template>
			<template v-if="bearFees == '投资人支付(不用还)'">
				<view class="od-item marginbottom20">
					<view class="item-tip">案件进度</view>
					<view class="item-right">
						<view class="service-list inline-list">
							<view class="service-item active">{{ jindu }}</view>
						</view>
						<view class="item-nav"></view>
					</view>
				</view>
				<view class="od-item marginbottom20">
					<view class="item-tip">我的身份</view>
					<view class="item-right">
						<view class="service-list inline-list">
							<view class="service-item active">{{ self_ident }}</view>
						</view>
						<view class="item-nav"></view>
					</view>
				</view>
				<view class="od-item marginbottom20">
					<view class="item-tip">对方类型<image @click="$refs.identPopop.open()" src="@/static/img/order-ques.png" mode=""
				style="width: 30rpx;height: 30rpx"></image></view>
					<view class="item-right">
						<view class="service-list inline-list">
							<view class="service-item active" style="width: calc((100% - 50rpx) / 2);">{{ dui_ident }}</view>
						</view>
						<view class="item-nav"></view>
					</view>
				</view>
				<view class="od-item marginbottom20">
					<view class="item-tip">对方失信<image src="@/static/img/order-ques.png" mode=""
				style="width: 30rpx;height: 30rpx"></image></view>
					<view class="item-right">
						<view class="service-list inline-list">
							<view class="service-item active">否</view>
						</view>
						<view class="whyIcon"
							@click="jump('/pages/client/order/web-view', { url: 'http://zxgk.court.gov.cn/zhixing ' })">
							<image src="@/static/img/why.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="od-item marginbottom20">
					<view class="item-tip">审理机构<image @click="$refs.organizationPopop.open()" src="@/static/img/order-ques.png" mode=""
				style="width: 30rpx;height: 30rpx"></image></view>
					<view class="item-right">
						<view class="service-list inline-list">
							<view class="service-item active">{{ organization }}</view>
						</view>
						<view class="item-nav"></view>
					</view>
				</view>
				<view class="od-item marginbottom20">

					<view class="item-tip require"><view class="center-box">
                        审理地点<view class="required-box">
                        *
                        </view>
                    </view><image src="@/static/img/order-ques.png" mode=""
				style="width: 30rpx;height: 30rpx"></image></view>
					<view class="item-right" @click="$refs.popupTake.open()">
						<view class="item-txt gray" v-if="!hear_addr">您的案件在哪里审理？</view>
						<view class="service-list inline-list" v-else>
							<view class="service-item active">{{ hear_addr }}</view>
						</view>
						<view class="item-nav" @click="$refs.popupTake.open()">
							<image src="@/static/img/right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="od-item marginbottom20">
					<view class="item-tip require">服务人员</view>
					<view class="item-right" @click="$refs.popupService.open()">
						<view class="service-list inline-list">
							<view class="service-item active">智能匹配</view>
							<view class="service-item active">{{ practiceYear.replace('以上', '起') }}</view>
							<view class="service-item active" v-if="practiceArea.split(',').length > 1">
								<text class="text-ellipsis">{{ practiceArea.split(',')[1] }}</text>
							</view>
							<view class="service-item active" v-else>{{ practiceArea }}</view>
						</view>
						<view class="item-nav">
							<image src="@/static/img/right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="od-item ">
					<view class="item-tip">服务阶段<image src="@/static/img/order-ques.png" mode=""
				style="width: 30rpx;height: 30rpx"></image></view>
					<view class="item-right" @click="$refs.popupServiceStage.open()">
						<view class="service-list inline-list">
							<view class="service-item active" style="width: 100%; margin-right: 0;">{{ stage }}</view>
						</view>
						<view class="item-nav" @click="$refs.popupServiceStage.open()">
							<image src="@/static/img/right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">服务报价</view>
					<view class="item-right">
						<view class="item-txt">投资人确定</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">投资人承担</view>
					<view class="item-right">
						<view class="item-txt">律师费+立案受理费+公告费+异地被告身份查询费</view>
						<view class="whyIcon" @click="downloadFile(info.product.doc[2].url)">
							<image src="@/static/img/why.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">投资人收益</view>
					<view class="item-right">
						<view class="item-txt">
							<text class="red">您回收款物后5日内，按回收款物金额的30％支付投资收益给投资人，不回款不用付。</text>
							<br />
						</view>
					</view>
				</view>
				<view class="od-item ">
					<view class="item-tip">项目资料</view>
					<view class="item-right"
						@click="jump('/pages/client/order/upload', { source: JSON.stringify(source) })">
						<view class="item-txt gray">您手上有的资料，都可上传</view>
						<view class="item-file" v-if="source && source.length > 0">
							<image src="@/static/img/order-file.png"></image>
						</view>
						<view class="item-nav">
							<image src="@/static/img/right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">我的要求</view>
					<view class="item-right">
						<order-right-textarea ref="myrequire"></order-right-textarea>
						<view class="item-nav"></view>
					</view>
				</view>
				<!-- <view class="od-item">
					<view class="item-tip">服务保障</view>
					<view class="item-right" @click="$refs.orderService.$refs.popupEnsure.open()">
						<view class="item-txt green">
							<view class="text-ellipsis" style="width: 400rpx;">{{ info.product.tags }}</view>
						</view>
						<view class="item-nav">
							<image src="@/static/img/right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view> -->
				<view class="od-item">
					<view class="item-tip require">服务方式</view>
					<view class="item-right">
						<view class="item-txt">{{ serviceType }}</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">其他费用</view>
					<view class="item-right">
						<view class="item-txt"><text class="blue">国家费用（或有）</text></view>
					</view>
					<view class="whyIcon" @click="$refs.orderCommonTipMaybe.$refs.popupTip.open()">
						<image src="@/static/img/why.png" mode="aspectFit"></image>
					</view>
				</view>
			</template>
			<!-- 服务范围组件 -->
			<order-item-service-desc :info="info" v-if="Object.keys(info.product).length > 0"></order-item-service-desc>
		</view>
		<!-- 服务内容组件 -->
		<order-unfold title="服务内容">
			<view slot="unfold-con">
				<view class="" v-html="info.product.serve_content"></view>
			</view>
		</order-unfold>
		<!-- 产品说明组件 -->
		<order-unfold-product title="产品说明" :img_src="info.product.desc_content"></order-unfold-product>

		<view class="od-box">
			<view class="od-item"
				@click="jump('/pages/client/order/ask', { id: info.product.id, product_name: info.product.product })">
				<view class="item-tip">问大家</view>
				<view class="item-right">
					<view class="item-txt">产品有疑问，进去问问用过的人吧</view>
					<view class="gray" style="line-height: 60rpx;" v-if="info.ques_count">{{ info.ques_count }}</view>
					<view class="item-nav">
						<image src="@/static/img/right.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="go-box">
			<view class="go-left">
				<view class="left-prize" v-if="bearFees == '投资人支付(不用还)'">
					<text style="font-size: 34rpx;">￥投资人支付</text>
					(不用还)
				</view>
				<template v-else>
					<view class="left-prize">
						￥{{ money }}
						<text class="coupon-prize" v-if="sell">已优惠￥{{ sell }}</text>
					</view>
					<view class="left-tip">{{ price_type_text }}</view>
				</template>
			</view>
			<view class="go-right" v-if="!edit_order_id"><button type="default" class="go-btn"
					@click="confirm">一键无忧下单</button></view>
			<view class="go-right" v-else><button type="default" class="go-btn" @click="addOrder">我要下单</button></view>
		</view>

		<!-- 服务人员弹出层 -->
		<uni-popup ref="popupService" type="bottom">
			<order-popup-service @closePop="closePop('popupService')" @chooseService="chooseService"
				:practiceChoose="practiceChoose" :practiceYear="practiceYear" :practiceArea="practiceArea"
				:key="new Date().getTime()" :info="info"></order-popup-service>
		</uni-popup>
		<!-- 服务保障新组件 -->
		<order-service ref="orderService" v-if="Object.keys(info.product).length > 0" :info="info"></order-service>
		<!-- 服务保障组件 -->
		<order-service-ensure ref="orderServiceEnsure" v-if="Object.keys(info.product).length > 0" :info="info">
		</order-service-ensure>
		<!-- 债券投资合同组件-->
		<order-invest-contact ref="investContact">
			<view class="agree-box" slot="agree-box">
				<checkbox-group @change="checkChange">
					<label>
						<checkbox style="transform:scale(0.8);" color="#FFC801" value="1" />
						我已阅读并同意按上述条款履行
					</label>
				</checkbox-group>
			</view>
			<view class="ok-box" slot="agree-box"><button type="default" class="ok-btn"
					@click="bondConfirm">确定并继续下单</button></view>
		</order-invest-contact>
		<!-- 审理地点弹出层 -->
		<uni-popup ref="popupTake">
			<order-popup-common title="审理地点" @closePop="closePop('popupTake')">
				<scroll-view class="popup-con" slot="popup-con" scroll-y="true">
					<view class="take-box">
						<view class="take-title">
							<text class="gray relative require">审理机关确定依据</text>
							<text class="blue">暂住证明</text>
							<text class="blue">法院管辖规定</text>
						</view>
						<view class="service-list">
							<view class="service-item" style="width: 100%;" :class="{ active: hear_basis == item }"
								v-for="(item, index) in info.list.hear_basis" @click="hear_basis = item">
								{{ item }}
							</view>
						</view>
						<view class="take-title">
							<text class="gray relative require">审理机关所在区域</text>
							<text class="red">(其他城市将逐步开放业务)</text>
						</view>
						<view class="service-list" style="justify-content: space-around;">
							<view class="service-item" style="width: calc((100% - 40rpx)/2);"
								:class="{ active: hear_addr == item }" v-for="(item, index) in info.list.hear_addr"
								@click="hear_addr = item">
								{{ item }}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="ok-box" slot="popup-btn"
					style="margin-top: -50rpx; position: absolute; bottom: 0; width: 100%; border-radius: 46rpx">
					<button type="default" class="ok-btn" @click="closePop('popupTake')">确定</button>
				</view>
			</order-popup-common>
		</uni-popup>
		<!-- 服务阶段弹出层 -->
		<uni-popup ref="popupServiceStage">
			<order-popup-common title="服务阶段" @closePop="closePop('popupServiceStage')">
				<scroll-view class="popup-con" slot="popup-con" scroll-y="true">
					<view class="take-box">
						<view class="take-title"><text class="gray require relative">您想让律师帮您代理哪几个办案阶段</text></view>
						<view class="service-list">
							<view class="service-item" style="width: 100%;" :class="{ active: stage == item }"
								v-for="(item, index) in stage_list" @click="stage = item">{{ item }}</view>
						</view>
					</view>
				</scroll-view>
				<view class="ok-box" slot="popup-btn"
					style="margin-top: -50rpx; position: absolute; bottom: 0; width: 100%; border-radius: 46rpx;">
					<button type="default" class="ok-btn" @click="closePop('popupServiceStage')">确定</button>
				</view>
			</order-popup-common>
		</uni-popup>
        <uni-popup ref="identPopop" type="bottom">
            <view class="popup-bottom-box">
            	<view class="bot-title">
            		<view class="title-txt">对方类型选择说明</view>
            		<view class="title-close" @click="closePop('identPopop')">
            			<view class="image-wrapper">
            				<image src="@/static/img/close.png" mode="aspectFit"></image>
            			</view>
            		</view>
            	</view>
                <view class="bot-con">
                    <view class="bot-title-box">
                        <view class="icon-box"></view>
                        <view class="title-text-box">快速指引</view>
                    </view>
                    <view class="bot-content-box">
                        可在企查查、启信宝、爱企查、国家企业信用信息公示系统上查询确认对方的类型
                    </view>
                    <view class="bot-title-box">
                        <view class="icon-box"></view>
                        <view class="title-text-box">个人/个体户</view>
                    </view>
                    <view class="bot-content-img-box">
                        <image src="@/static/img/ident-popup1.jpeg"></image>
                        <image src="@/static/img/ident-popup2.jpg" style="margin-left:20rpx"></image>
                    </view>
                    <view class="bot-title-box">
                        <view class="icon-box"></view>
                        <view class="title-text-box">私企/公司</view>
                    </view>
                    <view class="bot-content-img-box">
                        <image src="@/static/img/ident-popup3.jpg"></image>
                        <image src="@/static/img/ident-popup4.jpg" style="margin-left:20rpx"></image>
                    </view>
                </view>
                <view class="bot-save">
                    <view class="save-box" @click="closePop('identPopop')">朕知道了</view>
                </view>
                </view>
        </uni-popup>
        <uni-popup ref="organizationPopop" type="bottom">
            <view class="popup-bottom-box">
            	<view class="bot-title">
            		<view class="title-txt">审理机构选择说明</view>
            		<view class="title-close" @click="closePop('organizationPopop')">
            			<view class="image-wrapper">
            				<image src="@/static/img/close.png" mode="aspectFit"></image>
            			</view>
            		</view>
            	</view>
                <view class="bot-con">
                    <view class="bot-title-two-box">
                        <view class="icon-box"></view>
                        <view class="bot-content-box">您和对方没有书面文件约定由哪个机构审理的，</br>选<span>人民法院</span>。
                        </view>
                    </view>
                    <view class="bot-title-two-box">
                        <view class="icon-box"></view>
                        <view class="bot-content-box">您和对方有书面文件约定由人民法院审理的，</br>选<span>人民法院</span>。
                        </view>
                    </view>
                    <view class="bot-title-two-box">
                        <view style="margin-left:29rpx" class="bot-content-box">约定由XXX仲裁委员会审理的，</br>选<span>商事仲裁委</span>。
                        </view>
                    </view>
                    <view class="bot-title-two-box">
                        <view style="margin-left:29rpx" class="bot-content-box">书面文件约定范例
                        </view>
                    </view>
                    <view class="bot-title-two-box">
                        <view style="margin-left:29rpx" class="bot-content-box">·因本协议引起的或与本协议有关的任何争议，由双方友好协商解决。协商不成时，双方均有权向原告住所地的人民法院提起诉讼。
                        </view>
                    </view>
                    <view class="bot-title-two-box">
                        <view style="margin-left:29rpx" class="bot-content-box">·因本协议引起的或与本协议有关的任何争议，由双方友好协商解决，协商不成的，双方均同意提交广州仲裁委员会仲裁，并同意按照该会届时有效的仲裁规则仲裁。仲裁裁决是终局的，对各方均有约束力
                        </view>
                    </view>
                </view>
                <view class="bot-save">
                    <view class="save-box" @click="closePop('organizationPopop')">朕知道了</view>
                </view>
            </view>
        </uni-popup>
		<!-- 其他费用或有温馨提示 -->
		<order-common-tip ref="orderCommonTipMaybe">
			<view class="warm-tip-box" style="padding: 0 30rpx;">
				<view class="warm-tip-item">
					<view class="item-left">1</view>
					<view class="item-right">
						国家费用（或有）：指财产保全费、财产保全担保费、勘验费、鉴定费、翻译费、工商/房产/汽车查档费、证人/鉴定人/翻译人员出庭的交通费、住宿费、生活费和误工补贴费等。详情请查看下面附件文档。
					</view>
				</view>
				<view class="warm-tip-item">
					<view class="item-left">2</view>
					<view class="item-right">国家费用（或有）并非一定会发生，也并非每个案件都会发生。只有在您向相关国家部门提出书面申请，且经国家部门审查同意后，才有可能产生上述费用。
					</view>
				</view>
				<view class="warm-tip-item">
					<view class="item-left">3</view>
					<view class="item-right">案件办理过程中，如发生上述费用，您可到时与投资人协商是否额外承担支付这些费用。投资人如不同意支付该等费用的，请您自行支付。</view>
				</view>
				<view class="warm-tip-item">
					<view class="item-left">4</view>
					<view class="item-right">律师在其执业区域以内为您办案，由第三方收取的快递、交通、复印、打印、通讯等费用，概由律师承担，您不需支付。</view>
				</view>
			</view>
		</order-common-tip>
		<!-- 其他费用温馨提示 -->
		<order-common-tip ref="orderCommonTip">
			<view class="warm-tip-box" style="padding: 0 30rpx;">
				<view class="warm-tip-item">
					<view class="item-left">1</view>
					<view class="item-right">其他费用是指国家费用或差旅费用。</view>
				</view>
				<view class="warm-tip-item">
					<view class="item-left">2</view>
					<view class="item-right">
						国家费用：指政府机关、公检法或相关国家部门依法依规收取的法定费用，具体金额根据国家发票确定，分为必有费用和或有费用:
						<view class="warm-tip-item">
							<view class="item-left">a</view>
							<view class="item-right">
								必有费用：指立案受理费，收款单位对应法院或商事仲裁委。
								<view class="warm-tip-item">
									<view class="item-left">·</view>
									<view class="item-right">
										法院:您到法院告人家，法院审查后，同意受理您案件时，会根据国家规定标准，向您收取该费用。如果法院不同意受理，不收取该费用。您可点击“国家费用”，评估您案件需要的受理费。
									</view>
								</view>
								<view class="warm-tip-item">
									<view class="item-left">·</view>
									<view class="item-right">
										商事仲裁委:您到商事仲裁委告人家，商事仲裁委审查后，同意受理您案件时，会根据其制定的标准，向您收取该费用。如果商事仲裁委不同意受理，不收取该费用。具体收费标准，请上网搜索各个商事仲裁委电话，拨打咨询。
									</view>
								</view>
							</view>
						</view>
						<view class="warm-tip-item">
							<view class="item-left">b</view>
							<view class="item-right">
								或有费用：指财产保全费、财产保全担保费、异地被告身份证明查询费、法院公告费、勘验费、鉴定费、翻译费、工商/房产/汽车查档费、证人/鉴定人/翻译人员出庭的交通费、住宿费、生活费和误工补贴费等。详情请查看下面附件文档。
							</view>
						</view>
						<view class="warm-tip-item">
							<view class="item-left">c</view>
							<view class="item-right">或有费用并非一定会发生，也并非每个案件都会发生。只有在您向相关国家部门提出书面申请，且经国家部门审查同意后，才有可能会产生或有费用。
							</view>
						</view>
					</view>
				</view>
				<view class="warm-tip-item">
					<view class="item-left">3</view>
					<view class="item-right">
						差旅费用：指经您同意，律师在其执业区域以外为您办案，由第三方收取的住宿费、交通费、复印/打印费等异地费用，具体金额根据发票/票据确定。如不用律师出差，不产生该费用。
					</view>
				</view>
				<view class="warm-tip-item">
					<view class="item-left">4</view>
					<view class="item-right">律师在其执业区域以内为您办案，由第三方收取的快递、交通、复印、打印、通讯等费用，概由律师承担，您不需支付。</view>
				</view>
			</view>
		</order-common-tip>
		<!-- 全局通用组件 -->
		<law-common ref="lawCommon"></law-common>
	</view>
</template>
<script>
	import bus from '@/common/utils/bus.js';
	export default {
		data() {
			return {
				info: {
					list: {},
					product: {}
				},
				serviceType: '', //服务方式
				practiceChoose: '智能匹配', //挑选方式
				practiceYear: '全部', //执业年限
				practiceArea: '全国', //执业区域
				product_id: '', //七个产品id
				product_name: '', //七个产品名称
				area_id: '', //服务领域id
				requirement: '', //我的要求
				tags: '', //服务保障
				serve_content: '', //服务内容
				desc_content: '', //产品说明
				money: '', //律师费
				moneyList: [], //律师费列表
				source: [], //项目资料
				price_type_text: '', //律师费 付款方式
				agree: '', //同意
				bearFees: '', //费用承担
				jindu: '', //目前进度
				self_ident: '', //我的身份
				dui_ident: '', //对方类型
				is_believe: 1, //对方未失信
				organization: '', //审理机构
				hear_basis: '', //审理依据
				hear_addr: '', //审理机关所在区域
				offer: '', //千里马
				stage: '', //服务阶段
				stage_list: [], //服务阶段列表
				qiankuan: '', //涉案金额
				order_id: '', //法务编辑订单id
				current_coupon: {}, //选中的优惠券
				offerList: [],
				tipGrade: '', //服务报价提示
				sell: '', //优惠价格
				edit_order_id: '', //编辑是的传过来的订单id
				product_price_id: '', //律师费用方式
				fali_source: '',
				topImg: 'https://d-fali.bigchun.com/assets/product/84.png' //顶部图片

			};
		},
		created() {
			// 安卓
			window.payOk = this.payOk;
		},
		onLoad(params) {
			// 编辑
			if (params.order_id) {
				this.edit_order_id = params.order_id;
			}
			// 我要下单
			if (params.product_id && params.area_id && params.product_name && params.bearFees) {
				this.bearFees = params.bearFees;
				this.product_id = params.product_id;
				this.area_id = params.area_id;
				this.product_name = params.product_name;
				this.init();
			}
		},
		watch: {
			// 切换审理机构获取服务阶段
			organization(val, oldVal) {
				if (oldVal) {
					this.getStage();
				}
			},
			//切换费用承担
			bearFees(val, oldVal) {
				if (this.bearFees == '投资人支付(不用还)') {
					this.jindu = '待起诉';
					this.self_ident = '起诉方';
					this.dui_ident = '个人/个体户';
					this.organization = '人民法院';
					this.stage = '本诉 (套餐)一审+二审+执行';
					this.hear_basis = '合同约定的管辖地点';
					this.hear_addr = '广东广州';
					this.qiankuan = '本金1万元以上—5万元以下(含)(人民币)';
					this.money = '投资人支付(不用还)';
				} else if (this.bearFees == '自费') {
					this.qiankuan = '都可以';
					if (oldVal) {
						this.getMoney();
					}
				}
			},
			// 服务阶段
			stage(val, oldVal) {
				this.getOffer();
				if (oldVal) {
					this.getMoney();
				}
			},
			// 服务报价
			offer(val, oldVal) {
				this.getStage();
				this.getTip();
				if (oldVal) {
					this.getMoney();
				}
			},
			// 我的角色
			self_ident(val, oldVal) {
				this.getStage();
				this.getTip();
				this.getOffer();
				if (oldVal) {
					this.getMoney();
				}
			}
		},
		onPageScroll() {
			// console.log("onpage")
			// var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			// console.log(scrollTop)
			// if(scrollTop>500){
			// 	console.log("大于500")
			// 	uni.pageScrollTo({
			// 		scrollTop: 0,
			// 		duration: 300,
			// 		success:()=> {
			// 			console.log("成功")
			// 		},
			// 		fail: () => {
			// 			console.log("失败")
			// 		}
			// 	});
			// }
		},
		methods: {
			text() {

			},
			async init() {
				let formData;
				// 编辑
				if (this.edit_order_id) {
					formData = {
						id: this.product_id,
						area_id: this.area_id,
						type: 2
					};
				}
				// 新下单
				else {
					formData = {
						id: this.product_id,
						area_id: this.area_id
					};
				}
				if (uni.getStorageSync('token')) {
					formData = {
						...formData,
						token: uni.getStorageSync('token')
					};
				}

				let res = await this.$api('index.new_order', formData);

				this.info = res.data;
				this.money = res.data.product.price;
				this.serviceType = res.data.product.product_type;
				this.practiceChoose = res.data.product.choose;
				this.practiceYear = res.data.product.product_name;
				this.practiceArea = res.data.product.profession_name;
				this.practiceArea = res.data.product.profession_name;
				this.bearFees = res.data.product.money_type;
				this.jindu = res.data.list.jindu[0].value_name;
				this.self_ident = res.data.list.self_ident[0].value_name;
				this.dui_ident = res.data.list.dui_ident[0].value_name;
				this.organization = res.data.product.organization;
				this.stage = res.data.list.stage[0];
				this.hear_basis = res.data.list.hear_basis[0];
				this.hear_addr = res.data.list.hear_addr[0];
				this.requirement = res.data.product.requirement || '';
				this.source = res.data.product.source || [];
				this.offer = res.data.product.offer;
				this.offerList = res.data.list.offer;
				this.moneyList = res.data.list.price_type;
				this.price_type_text = res.data.product.price_type_text;
				this.product_price_id = res.data.product.id;
			},
			async getMoney() {
				let formData = {
					token: uni.getStorageSync('token'),
					product_type_id: this.serviceType,
					product_id: this.product_name,
					product_name_id: this.practiceYear,
					coupon_id: this.current_coupon ? this.current_coupon.id : '',
					self_ident: this.self_ident, //我的角色
					stage: this.stage, //服务阶段
					offer: this.offer //服务报价
				};
				let res = await this.$api('index.product_price_name', formData);
				this.moneyList = res.data;
				this.money = res.data.length > 0 ? res.data[0].price : '';
				this.price_type_text = res.data.length > 0 ? res.data[0].price_type_text : '';
				this.sell = res.data.length > 0 ? res.data[0].sell : '';
			},
			// 优惠券
			getCoupon(current_coupon) {
				this.current_coupon = current_coupon;
				this.getMoney();
			},
			chooseService(obj) {
				this.practiceChoose = obj.choose;
				this.practiceYear = obj.year;
				this.practiceArea = obj.area;
			},
			bondConfirm() {
				if (this.agree == '1') {
					this.addOrder(this.price_type_text);
				} else {
					uni.showToast({
						title: '请勾选我已阅读并同意按上述条款履行',
						icon: 'none'
					});
				}
			},
			confirm() {
				if (this.bearFees == '投资人支付(不用还)') {
					this.$refs.investContact.$refs.popupBond.open();
				} else {
					this.addOrder(this.price_type_text);
				}
			},
			async addOrder(money_type) {
				let formData = {
					token: uni.getStorageSync('token'),
					product_id: this.product_name,
					fali_serve_area_id: this.info.product.area.area_name,
					server_type_id: this.serviceType,
					server_name_id: this.practiceYear,
					offer_type: this.offer_type,
					money_type: money_type ? money_type : '',
					money: this.money,
					pay_type: this.$refs.orderItemPayMethod ? this.$refs.orderItemPayMethod.payMethod : '', //无
					source: this.source,
					requirement: this.$refs.myrequire.requirement_copy,
					price_type: this.bearFees, // 费用承担
					price_detail: '', //费用明细
					qiankuan: this.qiankuan, //欠款金额
					jindu: this.jindu, //目前进度
					self_ident: this.self_ident, //我的身份
					dui_ident: this.dui_ident, //对方类型
					is_believe: this.is_believe, //对方是否失信 0是 1否
					organization: this.organization, //审理机构
					stage: this.stage, //服务阶段
					offer: this.offer, //服务报价
					server_address: this.hear_basis + this.hear_addr, //审理地点,
					product_price_id: this.product_price_id,
					fali_source: this.fali_source
				};

				if (this.edit_order_id) {
					formData = {
						...formData,
						id: this.edit_order_id
					};
				}
				let res = await this.$api('index.addOrder_name', formData);
				if (res.code == 1) {
					// 从编辑进来
					if (this.edit_order_id) {
						this.order_id = this.edit_order_id;
						if (money_type == '先用后付 无忧付') {
							this.replace('/pages/client/user/match', {
								order_id: this.order_id
							});
						} else {
							let formDataPay = {
								order_id: this.order_id,
								payMethod: this.$refs.orderItemPayMethod ? this.$refs.orderItemPayMethod
									.payMethod : '',
								fen: '',
								pay_type: 1
							};
							let resPay = await this.$pay(formDataPay);
							if (resPay == 1) {
								let pages = getCurrentPages();
								let prevPage = pages[pages.length - 2];
								prevPage.$vm.init();
								uni.navigateBack({
									delta: 1
								});
							}
						}
					}
					// 新下单
					else {
						this.order_id = res.data.order_id;
						if (money_type == '先用后付 无忧付' || this.bearFees == '投资人支付(不用还)' || this.offer == '还魂马') {
							this.replace('/pages/client/user/match-specialist', {
								order_id: this.order_id
							});
						} else {
							let formDataPay = {
								order_id: this.order_id,
								payMethod: this.$refs.orderItemPayMethod ? this.$refs.orderItemPayMethod
									.payMethod : '',
								fen: '',
								pay_type: 1
							};
							let resPay = await this.$pay(formDataPay);
							if (resPay == 1) {
								this.replace('/pages/client/user/match-specialist', {
									order_id: this.order_id
								});
							}
						}
					}
				}
			},
			payOk(res) {
				// 安卓0 支付成功，-1 支付失败， -2取消支付
				if (res == '0') {
					this.replace('/pages/client/user/match', {
						order_id: this.order_id
					});
				}
			},
			// 勾选同意债券投资合同
			checkChange(e) {
				this.agree = e.detail.value[0];
			},
			// 获取服务阶段
			async getStage() {
				let formData = {
					organization: this.organization,
					self_ident: this.self_ident,
					token: uni.getStorageSync('token')
				};

				let res = await this.$api('index.change_stage', formData);
				if (res.code == 1) {
					this.stage_list = res.data.stage;
					this.stage = res.data.stage[0];
				}
			},
			// 获取服务报价
			async getOffer() {
				let formData = {
					stage: this.stage,
					self_ident: this.self_ident,
					token: uni.getStorageSync('token')
				};

				let res = await this.$api('index.change_offer', formData);
				if (res.code == 1) {
					this.offerList = res.data;
				}
			},
			//获取服务报价提示
			async getTip() {
				let formData = {
					offer: this.offer,
					stage: this.stage,
					self_ident: this.self_ident,
					token: uni.getStorageSync('token')
				};
				let res = await this.$api('index.get_offer', formData);
				this.tipGrade = res.data;
			}
		}
	};
</script>

<style lang="scss">
	.content {
		padding-bottom: 122rpx;
	}

	.item-top {
		width: 100%;
		height: 600rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.item-admin {
			position: absolute;
			height: 20rpx;
			top: 136rpx;
			left: 10rpx;
			height: 60rpx;
			color: #FFFFFF;
			line-height: 60rpx;
			padding: 0 10rpx;
			font-size: 22rpx;
			font-weight: bold;
			border-radius: 10rpx;
			background-color: rgba(0, 0, 0, 0.66);
		}

		.item-img {
			display: flex;

			.item-left {
				flex: 1;

				image {
					margin: 42rpx 0 0 20rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}

			.item-right {
				image {
					margin: 42rpx 20rpx 0 0;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

	}

	.item-main {
		width: 100%;
		height: 312rpx;
		background-color: #FFFFFF;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.main-top {
			display: flex;
			align-items: center;

			.top-left {
				flex: 1;
				font-size: 48rpx;
				color: #DC3220;
			}

			.top-right {
				font-size: 26rpx;
				color: #666666;
			}
		}

		.item-title {
			font-size: 32rpx;
			line-height: 45rpx;
			margin: 20rpx 0 16rpx 0;
			font-weight: bold;
		}

		.item-way {
			.item-txt {
				width: 100rpx;
				height: 34rpx;
				line-height: 34rpx;
				margin-right: 5rpx;
				padding: 4rpx 10rpx;
				font-size: 20rpx;
				color: #0DAB37;
				border-radius: 6rpx;
				border: 1rpx rgba(13, 171, 55, 0.2) solid;
			}
		}

		.item-bottom {
			background-color: #EEF2F3;
			width: 100%;
			height: 66rpx;
			line-height: 66rpx;
			display: flex;
			margin-top: 16rpx;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;

			.bottom-sure {
				width: 50rpx;
				height: 50rpx;
			}

			.bottom-left {
				font-size: 28rpx;
				font-weight: bold;
				color: #0DAB37;
			}

			.bottom-order {
				width: 2rpx;
				height: 30rpx;
				margin: 0 10rpx;
				background-color: #D2D2D2;
			}

			.bottom-txt {
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.bottom-img {
				width: 14rpx;
				height: 24rpx;
				margin-left: 24rpx;
			}
		}
	}

	.od-boxs {
		border-radius: 0 !important;
	}

	.pay-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;

		.pay-item {
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			border: 1rpx solid #eee;
			border-radius: 10rpx;
			padding: 10rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			text-align: center;
			width: calc((100% - 20rpx) / 2);
			margin-bottom: 20rpx;

			&:nth-of-type(2n) {
				margin-right: 0;
			}

			&.active {
				background-color: rgba(255, 200, 1, 0.2);
				border-color: $uni-color-primary;
			}

			.image-wrapper {
				width: 40rpx;
				height: 40rpx;
				display: inline-block;
				margin-right: 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.space {
		display: inline-block;
		width: 30rpx;
	}

	.item-text {
		line-height: 60rpx;
		display: flow-root;
		flex: 1;

		text {
			margin-right: 10rpx;
		}
	}

	.take-box {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		padding-bottom: 120rpx;

		.take-title {
			margin-bottom: 20rpx;

			.gray {
				margin-right: 30rpx;
			}

			text {
				margin-right: 10rpx;
			}

			.red {
				font-size: 24rpx;
			}

			.blue {
				font-size: 24rpx;
			}
		}

		.service-list {
			.service-item {
				margin-right: 0;
			}
		}
	}

	.agree-box {
		margin-top: 10rpx;
		text-align: center;
	}

	.service-item {
		position: relative;

		.price-tip {
			border-radius: 20rpx;
			padding: 20rpx;
			position: absolute;
			top: 100rpx;
			left: 0;
			width: 350rpx;
			height: 200rpx;
			background-color: #ffffff;
			z-index: 9;
			color: #333333;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);

			&::before {
				content: '';
				position: absolute;
				left: 25%;
				top: -20rpx;
				width: 0;
				height: 0;
				transform: translateX(-50%);
				-webkit-transform: translateX(-50%);
				-moz-transform: translateX(-50%);
				border-left: 20rpx solid transparent; // 根据三角形方向选择对应的boder-direction
				border-right: 20rpx solid transparent; // 根据三角形方向选择对应的boder-direction
				border-bottom: 20rpx solid white; // 根据三角形方向选择对应的boder-direction
			}

			.price-tip-txt {
				margin-bottom: 10rpx;
				font-size: 24rpx;
			}
		}
	}

	.service-item {
		&:nth-last-of-type(1) {
			.price-tip {
				left: -200rpx;

				&::before {
					content: '';
					left: 80%;
				}
			}
		}
	}

	.fee-item {
		width: 100%;

		.fee-tip {
			width: 150rpx;
			line-height: 60rpx;
			padding: 0;
		}

		.fee-right {
			line-height: 60rpx;
		}
	}

	.service-list .service-item {
		font-size: 26rpx;
		border-radius: 0;
	}

	.service-list .service-item.active {
		color: #F9B804;
		font-size: 26rpx;
		background-color: #FFFFFF;
		border-radius: 0;
		margin-left: 10rpx;
	}
    .center-box{
        display: flex;
        align-items: center;
        .required-box{
            display: flex;
            align-items: center;
            color: red;
        }
    }
    .cjg {
    	padding: 0 40rpx;
    	position: absolute;
    	right: 0rpx;
    	height: 62rpx;
    	line-height: 62rpx;
    }

    .od-box .od-item .item-tip {
    	font-size: 26rpx;
    	width: 180rpx;
      margin-right:20rpx;
    }

    .service-list {
    	display: flex;
    	align-items: center;
    }
    .service-list .service-item.active {
    	color: #F9B804;
    	font-size: 26rpx;
    	background-color: #FFFFFF;
    	border-radius: 0;
    	margin-left: 10rpx;
    }
    .popup-bottom-box {
    	background-color: #ffffff;
    	overflow: auto;
    	// border-top-left-radius: 26rpx;
    	// border-top-right-radius: 26rpx;

    	.bot-title {
    		display: flex;
    		align-items: center;

    		.title-txt {
    			flex: 1;
    			text-align: center;
    			padding: 20rpx;
    			font-weight: bold;
    		}

    		.title-close {
    			width: 80rpx;
    			height: 80rpx;
    			text-align: center;
    			position: absolute;
    			top: 0;
    			right: 0;
    			display: flex;
    			align-items: center;
    			justify-content: center;

    			.image-wrapper {
    				width: 26rpx;
    				height: 26rpx;
    				vertical-align: middle;

    				image {
    					width: 100%;
    					height: 100%;
    				}
    			}
    		}
    	}

    	.bot-con {
    		padding: 0 30rpx;
            height: 800rpx;
            overflow-y: scroll;
    		.service-list {
    			margin-bottom: 20rpx;
    		}
            .bot-title-box{
                display: flex;
                align-items: center;
                .icon-box{
                    width: 12rpx;
                    height: 30rpx;
                    background: #FFC900;
                    opacity: 1;
                    border-radius: 6rpx;
                }
                .title-text-box{
                    margin-left: 5rpx;
                    height: 45rpx;
                    font-size: 32rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #000000;
                    opacity: 1;
                }
                .bot-content-box{
                    margin: 10rpx 0rpx 10rpx 17rpx;
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: rgba(0,0,0,0.6);
                    opacity: 1;
                    span{
                        color: #000;
                        font-weight: 600;
                    }
                }
            }
            .bot-title-two-box{
                display: flex;
                .icon-box{
                    margin-top: 5rpx;
                    width: 12rpx;
                    height: 30rpx;
                    background: #FFC900;
                    opacity: 1;
                    border-radius: 6rpx;
                }
                .bot-content-box{
                    margin: 0rpx 0rpx 0rpx 17rpx;
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 400;
                    line-height: 40rpx;
                    color: rgba(0,0,0,0.6);
                    opacity: 1;
                    span{
                        color: #000;
                        font-weight: 600;
                    }
                }
            }
            .bot-content-box{
                margin: 10rpx 0rpx 10rpx 17rpx;
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: rgba(0,0,0,0.6);
                opacity: 1;
                span{
                    color: #000;
                    font-weight: 600;
                }
            }
            .bot-content-img-box{
                 margin: 10rpx 0rpx 10rpx 17rpx;
                 display: flex;
                 image{
                     width: 300rpx;
                     height: 420rpx;
                 }
            }
            .line-box{
                width: 100%;
                height: 1rpx;
                border: 1px solid #D5D5D5;
                background-color: #D5D5D5;
                margin: 15rpx 0rpx;
            }
    	}
        .bot-save{
            width: 100%;
            height: 102rpx;
            background: rgba(255, 255, 255, 0.39);
            box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.16);
            opacity: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            .save-box{
               width: 60%;
                height: 60rpx;
                border-radius: 30rpx;
                background-color: #F9B804;
                color: #fff;
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: bold;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
</style>
